<template>
    <div class="userfeedback">
        <div class="userfeedback-top">
            <div class="userfeedback-top-search">
                <div class="userfeedback-top-search-item">
                    <el-input
                        v-model="username"
                        placeholder="查找用户名"
                        clearable
                    >
                        <template slot="prepend">用户名</template>
                    </el-input>
                </div>

                <div
                    class="el-input el-input-group el-input-group--prepend"
                    style="margin-right: 10px"
                >
                    <div class="el-input-group__prepend">满意度</div>
                    <el-select
                        v-model="value"
                        style="width: calc(100%)"
                        clearable
                        placeholder="请选择满意度"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </div>

                <div
                    class="el-input el-input-group el-input-group--prepend"
                    style="margin-right: 10px"
                >
                    <div class="el-input-group__prepend">满意度排序</div>
                    <el-select
                        v-model="valueOrder"
                        style="width: calc(100%)"
                        clearable
                        placeholder="请选择顺序"
                    >
                        <el-option
                            v-for="item in optionsOrder"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <el-button @click="handleSearchUser" type="primary">查找</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%" stripe border>
            <el-table-column type="index" width="50"> </el-table-column>
            <el-table-column prop="user" label="用户名" width="200">
            </el-table-column>
            <el-table-column prop="star" label="满意度" width="200">
                <template slot-scope="scope">
                    <el-rate v-model="scope.row.star" disabled></el-rate>
                </template>
            </el-table-column>
            <el-table-column prop="time" label="日期" width="250">
            </el-table-column>
            <el-table-column prop="content" label="留言"> </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button
                        type="danger"
                        plain
                        slot="reference"
                        @click="handleDelUserFeedback(scope.row.id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="total, sizes, prev, pager, next"
            :total="total"
            :page-sizes="[5, 10, 20, 50]"
            @current-change="handleChangeCurrentPage"
            @size-change="handleChangeSize"
        >
        </el-pagination>
    </div>
</template>

<script>
import { userFeedbackList, deleteUserFeedback } from "../../api";
import { formatDate } from "../../utils";

export default {
    name: "UserFeedback",
    data() {
        return {
            options: [
                {
                    value: "1",
                    label: "1",
                },
                {
                    value: "2",
                    label: "2",
                },
                {
                    value: "3",
                    label: "3",
                },
                {
                    value: "4",
                    label: "4",
                },
                {
                    value: "5",
                    label: "5",
                },
            ],
            optionsOrder: [
                {
                    value: 0,
                    label: "由低到高",
                },
                {
                    value: 1,
                    label: "由高到低",
                },
            ],
            value: null,
            valueOrder: null,
            tableData: [],
            pageNo: 0,
            pageSize: 10,
            starOrder: null,
            username: "",
            star: "",
            total: 0,
        };
    },

    methods: {
        async handleSearchUser() {
            try {
                let value = this.value ? Number(this.value) : this.value;
                const res = await userFeedbackList("/feedback/list", {
                    pageNo: 1,
                    pageSize: this.pageSize,
                    starOrder: this.valueOrder,
                    user: this.username ? this.username : null,
                    star: value,
                });
                this.tableData = this.formatTable(res);
            } catch (err) {}
        },

        async handleChangeCurrentPage(e) {
            try {
                const res = await userFeedbackList("/feedback/list", {
                    pageNo: e,
                    pageSize: this.pageSize,
                    starOrder: this.valueOrder ? this.valueOrder : null,
                });
                this.tableData = this.formatTable(res);
            } catch (err) {
                this.$message.error(err);
            }
        },

        async handleChangeSize(e) {
            this.pageSize = e;
            try {
                const res = await userFeedbackList("/feedback/list", {
                    pageNo: 1,
                    pageSize: this.pageSize,
                    starOrder: this.valueOrder ? this.valueOrder : null,
                });
                this.tableData = this.formatTable(res);
            } catch (err) {
                this.$message.error(err);
            }
        },

        formatTable(lists) {
            this.total = lists.data.data.total;
            return lists.data.data.list.map((item) => {
                item.time = formatDate(item.time);
                return item;
            });
        },

        async handleDelUserFeedback(id) {
            console.log("============", id);
            try {
                const res = await deleteUserFeedback("/feedback/delete", {
                    id,
                });
                if (res.data.code === 0) {
                    this.$message({
                        type: "success",
                        message: res.data.data,
                    });
                    this.tableData = this.tableData.filter((item) => {
                        return item.id !== id;
                    });
                    // TODO 用户反馈列表
                    // const res1 = await userFeedbackList("/feedback/list", {
                    //     pageNo: this.pageNo,
                    //     pageSize: this.pageSize,
                    //     starOrder: this.valueOrder ? this.valueOrder : null,
                    // });

                    // console.log("---------", res1);
                } else {
                    this.$message.error(res.data.message);
                }
            } catch (err) {
                this.$message.error(err);
            }
        },
    },

    async mounted() {
        try {
            const res = await userFeedbackList("/feedback/list", {
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                starOrder: this.valueOrder ? this.valueOrder : null,
            });
            console.log("---------------", res);
            this.tableData = this.formatTable(res);
        } catch (err) {}
    },
};
</script>

<style lang="less">
.userfeedback {
    &-top {
        display: flex;
        margin-bottom: 20px;
        &-search {
            display: flex;
            &-item {
                margin-right: 20px;

                .el-input {
                    width: 300px;
                }
            }
        }
    }

    .el-input-group--append .el-select .el-input.is-focus .el-input__inner,
    .el-input-group--prepend .el-select .el-input.is-focus .el-input__inner {
        border-color: #409eff;
    }

    .el-pagination {
        margin-top: 20px;
        float: right;
    }
}
</style>
